<template>
  <div class="qingwu">
    <div class="admin_main_block">
      <div class="admin_main_block_top">
        <div class="admin_main_block_left">
          <!-- <div><router-link to="/Admin/menus/form"><el-button type="primary" icon="el-icon-plus">添加</el-button></router-link></div> -->

          <div>
            <el-input
              v-model="where.order_no"
              placeholder="请输入订单号"
            ></el-input>
          </div>
          <!-- <div style="width:130px;"><el-date-picker format="yyyy-MM-dd HH:mm" type="date" placeholder="开始日期" v-model="where.times[0]" style="width: 100%;"></el-date-picker></div> -->
          <div>
            <el-date-picker
              format="yyyy-MM-dd HH:mm"
              v-model="where.times"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
          <div>
            <el-button icon="el-icon-search" @click="get_order_list()"
              >条件筛选</el-button
            >
          </div>
        </div>

        <div class="admin_main_block_right">
          <div>
            <el-button icon="el-icon-back" @click="$router.go(-1)"
              >返回</el-button
            >
          </div>
        </div>
      </div>
      <div class="admin_table_main">
        <el-table :data="list" @selection-change="handleSelectionChange">
          <!-- <el-table-column type="selection"></el-table-column> -->
          <!-- <el-table-column prop="id" label="#" fixed="left" width="70px"></el-table-column> -->
          <!-- <el-table-column prop="id" label="#"  width="70px"></el-table-column> -->

          <el-table-column
            prop="order_no"
            label="订单号"
            width="150px"
          ></el-table-column>
          <el-table-column
            prop="member.realname"
            label="用户"
          ></el-table-column>
          <el-table-column
            prop="member.username"
            label="手机号"
            width="110px"
          ></el-table-column>
          <el-table-column
            label="商品名称"
            prop="order_goods_name"
            width="150px"
          ></el-table-column>
          <el-table-column label="订单状态">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.cn_status == '订单完成'">{{
                scope.row.cn_status
              }}</el-tag>
              <el-tag
                type="warning"
                v-else-if="scope.row.cn_status == '售后处理'"
                >{{ scope.row.cn_status }}</el-tag
              >
              <el-tag v-else-if="scope.row.cn_status == '等待发货'">{{
                scope.row.cn_status
              }}</el-tag>
              <el-tag
                type="danger"
                v-else-if="scope.row.cn_status == '等待支付'"
                >{{ scope.row.cn_status }}</el-tag
              >
              <el-tag type="info" v-else>{{ scope.row.cn_status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="delivery_no"
            label="物流单号"
            width="120px"
          ></el-table-column>
          <el-table-column
            prop="refund_time"
            label="退款申请时间"
            width="130px"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.refund_time < 0">-</span>
              <span>{{ scope.row.refund_time | formatDate }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="refund_info"
            label="退款说明"
          ></el-table-column>
          <el-table-column
            prop="order_price"
            label="退款金额"
          ></el-table-column>
          <el-table-column label="退款凭证" width="200px" align="center">
            <template slot-scope="scope">
              <div class="dfs">
                <div
                  v-for="(item, index) in scope.row.refund_images.split(',')"
                  :key="index"
                >
                  <img :src="item" alt />
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="re_status" label="退款状态"></el-table-column>
          <el-table-column
            prop="refund_seller_review_time"
            label="退款审核时间"
            width="130px"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.refund_seller_review_time < 0">-</span>
              <span>{{
                scope.row.refund_seller_review_time | formatDate
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="refund_refuse_info"
            label="驳回原因"
          ></el-table-column>
          <el-table-column label="操作" fixed="right" width="120px">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="refundMoney(scope.row.id)"
                >退款</el-button
              >
              <!-- <el-button
                icon="el-icon-edit"
                @click="$router.push('/Seller/order/info/'+scope.row.id)"
              >查看订单</el-button>-->
              <!-- <el-button type="danger" icon="el-icon-delete" @click="del(scope.row.id)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="admin_table_main_pagination">
          <el-pagination
            @current-change="current_change"
            background
            layout="prev, pager, next,jumper,total"
            :total="total_data"
            :page-size="page_size"
            :current-page="current_page"
          ></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      title="退款审核"
      :visible.sync="dialogFormVisible"
      width="50%"
      center
      @close="clear"
    >
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item label="退款" prop="refund">
          <el-radio-group v-model="form.refund">
            <el-radio :label="2">通过</el-radio>
            <el-radio :label="3">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="form.refund == 3"
          label="驳回原因"
          prop="refund_refuse_info"
        >
          <el-input
            v-model="form.refund_refuse_info"
            placeholder="最多100个字符，超过字数限制不继续可输入"
            maxlength="100"
            clearable
            type="textarea"
            rows="4"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit('form')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      list: [],
      total_data: 0, // 总条数
      page_size: 20,
      current_page: 1,
      select_id: "",
      goods_verify_count: 0,
      where: {
        times: [],
        type: "REFUND",
        order_no: "",
        is_groupbuy: 0,
        page: "",
      },
      form: {
        refund: "",
        refund_refuse_info: "",
        id: "",
      },
      dialogFormVisible: false,
      rules: {
        refund: [
          {
            required: true,
            message: "请选择驳回原因",
            trigger: "change",
          },
        ],
        refund_refuse_info: [
          {
            required: true,
            message: "请输入驳回原因",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 清除驳回原因关闭时
    clear() {
      this.form.refund = "";
      this.form.refund_refuse_info = "";
    },
    //   退款
    refundMoney(id) {
      this.form.id = id;
      this.dialogFormVisible = true;
    },
    //
    // 提交
    handleSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.$post(this.$api.refundSellermoney, this.form).then((res) => {
            if (res.code == 200) {
              this.$message.success("退款成功");
              this.get_order_list();
              this.dialogFormVisible = false;
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          this.$message.warning("有必选项每填，不能提交哦~~");
        }
      });
    },
    handleSelectionChange: function (e) {
      let ids = [];
      e.forEach((v) => {
        ids.push(v.id);
      });
      this.select_id = ids.join(",");
    },
    get_order_list: function () {
      let where = {};
      where.page = this.current_page;
      where.params = this.where;
      this.$get(this.$api.getSellerOrderList, where).then((res) => {
        this.page_size = res.data.per_page;
        this.total_data = res.data.total;
        this.list = res.data.data;
        this.current_page = res.data.current_page;
      });
    },
    // 删除处理
    // del:function(id){
    //     if(this.$isEmpty(id)){
    //         return this.$message.error('请先选择删除的对象');
    //     }
    //     this.$post(this.$api.delGoods,{id:id}).then(res=>{
    //         if(res.code == 200){
    //             this.get_order_list();
    //             return this.$message.success("删除成功");
    //         }else{
    //             return this.$message.error("删除失败");
    //         }
    //     });
    // },

    current_change: function (e) {
      this.current_page = e;
      this.get_order_list();
    },
  },
  created() {
    this.get_order_list();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.table_dl_dd_all {
  height: 50px;
  overflow: hidden;
}
.dfs {
  display: flex;
  align-items: center;
}
</style>